<template>
    <div class="container" v-loading="loading">
        <div class="result" v-for="(value, key,index) in objData" :key="key" :style="{'margin-top':index>=1?'30px':'0'}">
            <div class="result-title">
                <div class="l">
                    <img src="@/assets/images/u5370.png" alt="">
                    <span>{{ key }} </span>

                </div>
                <div class="r">
                    共 {{value.filter(item => item.result === "1").length}} 个疑点
                </div>
            </div>
            <div class="result-table">
                <el-table v-loading="loading" ref="bqEltable" :show-header="false" :data="value" style="width: 100%" fit :border="false">
                    <el-table-column label="指标名称" prop="quotasDesc" align="left">
                        <template slot-scope="scope">
                            <span :class="[scope.row.result === '1' ? 'textRedColor' : '']">{{ scope.row.quotasDesc }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="疑点" prop="result" align="right">
                        <template slot-scope="scope">
                            <span v-if="scope.row.result === '1'" class="textRedColor">疑点</span>
                            <span v-else class="textblueColor">正常</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        
        <div style="text-align:center;margin-top:30px;">
            <el-button type="primary" size="mini" @click="go('list')">返回</el-button>
        </div>
    </div>
</template>

<script>

import { getQuotasDetailResult } from '@/api/znjk/znjk'
import { queryQuotasAttribute } from '@/api/tzyy/mxkc'
export default {
    name: 'zznjk-result',
    props: {
        rowData: {
            type: Object,
            default: false
        }

    },
    data() {
        return {
            loading: false,

            //右侧表格开始
            swtableColumns: [
                {
                    label: '指标名称',
                    prop: 'bmc',
                    align: 'center',
                    minWidth: 120,

                },
                {
                    label: '疑点',
                    prop: 'yd',
                    align: 'center',
                    minWidth: 120,
                }
            ],
         
            total: 0,
            selectedRows: [],
            queryObj: {
                zbmc: '', //指标名称
                rwmc: '',//指标类型
                pageNo: 1,
                pageSize: 20
            },
            zbbq: [],
            objData:{}
        }
    },

    mounted() {
        this.getTableData()
    },
//     computed: {
//     filteredItemsCount() {
//         let countArr=[]
//         for(const item in this.objData){
//          countArr.push(this.objData[item].filter(item => item.result == '1').length)
//         }
//       return countArr;
//     }
//   },
    methods: {
        getQueryQuotasAttribute() {
            queryQuotasAttribute().then(res => {
                if (res.code == 200) {

                    this.zbbq = res.data


                }
            })
        },
        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.zbmc = params.zbmc || '';
            this.queryObj.rwmc = params.rwmc || '';
            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.getTableData();
        },
        getTableData() {
            this.loading = true;
            let params = {
                batchId: this.rowData.task_batch_id,

                
            }
            getQuotasDetailResult(params).then(res => {
                console.log(res)
                this.loading = false;
                if (res.code == 200) {
                    this.objData = res.data
                    // this.total = res.total
                }
            })
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        del() {
            if (this.selectedRows.length > 0) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    let ids = []
                    this.selectedRows.forEach(item => {
                        ids.push(item.id)
                    })
                    delete_hyxxk(ids.join(',')).then(result => {
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }
        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },



    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 8px;

    .result {
        .result-title {
            height: 32px;
            line-height: 32px;
            color: #000;
            background-color: rgba(214, 220, 224, 1);
            line-height: 32px;
            padding-left: 10px;
            display: flex;
            justify-content: space-between;

            .l,
            .r {
                line-height: 32px;

                img {
                    margin-top: 3px;
                    width: 26px;
                    height: 26px;
                    vertical-align: top;
                }
            }
            .r {
                font-size: 12px;
                padding-right: 20px;
            }
        }

        .result-table {
            padding: 10px 20px;
            border: 1px solid #dcdfe6;
        }
    }

    .btn {
        padding: 8px 8px 8px 0;
    }

    ::v-deep .undertxt {
        color: rgb(64, 158, 255);
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    ::v-deep .textRedColor {
        color: rgb(217, 0, 27);
        font-weight: 700;
        // cursor: pointer;
    }
    ::v-deep .textblueColor {
        color: rgb(112, 182, 3);
        font-weight: 700;
        // cursor: pointer;
    }

    ::v-deep .el-table--border th.el-table__cell,
    ::v-deep .el-table td.el-table__cell {
        border-bottom: none !important;
    }

    ::v-deep .el-table--border .el-table__cell {
        border-right: none !important;
    }

    ::v-deep .el-table--group,
    .el-table--border {
        border: none !important;
    }

    .el-table::before {
        height: 0;
    }
}
</style>
